<template>
  <el-card class="box-card">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="考试名称" width="180">
        <template #default="scope">
          <el-tooltip content="点击查看考试详情" placement="top">
            <span class="col2-cell-style" @click="viewTest(scope.row)">{{
              scope.row.name
            }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="totalTime" label="考试时长" width="180" />
      <el-table-column prop="joinTime" label="参加考试时间" />
      <el-table-column prop="submitTime" label="交卷时间" />
      <el-table-column prop="beginTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
  </el-card>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    let tableData = reactive([
      {
        name: "测试111",
        totalTime: 2000,
        joinTime: "2023-11-28 19:02:19",
        submitTime: "2023-11-28 19:52:19",
        beginTime: "2023-11-28 19:00:00",
        endTime: "2023-11-28 20:00:00",
      },
      {
        name: "测试222",
        totalTime: 120,
        joinTime: "2023-11-28 19:02:19",
        submitTime: "2023-11-28 19:52:19",
        beginTime: "2023-11-28 19:00:00",
        endTime: "2023-11-28 20:00:00",
      },
      {
        name: "测试333",
        totalTime: 120,
        joinTime: "2023-11-28 19:02:19",
        submitTime: "2023-11-28 19:52:19",
        beginTime: "2023-11-28 19:00:00",
        endTime: "2023-11-28 20:00:00",
      },
    ]);
    function viewTest(row) {
      localStorage.setItem("testInfo",JSON.stringify(row));
      router.push({ path: "/showTest" });
    }
    return { tableData, viewTest };
  },
};
</script>

<style scoped>
.col2-cell-style {
  color: #409eff;
  cursor: pointer;
}
.box-card {
  width: 70%;
  margin-top: 20px;
  margin-left: 15%;
}
</style>